<template>
  <div class="blog-list-container" ref="mainContainer" v-loding="isLoading">
    <ul>
      <li v-for="(item,index) in data.rows"  :key="index">
        <Empty  v-if="item.id === 'null'" />
        <div v-if="item" class="thumb">
          <router-link
            :to="{
              name: 'BlogDetail',
              params: {
                id: item.id
              },
            }"
          >
            <img v-vayz="item.thumb" :alt="item.title" :title="item.title" />
          </router-link>
        </div>
        <div class="main">
          <router-link
            :to="{
              name: 'BlogDetail',
              params: {
                id: item.id
              },
            }"
          >
            <h2>{{ item.title }}</h2>
          </router-link>
          <div class="aside">
            <span>日期：{{ fromDate(item.createDate) }}</span>
            <span>浏览：{{ item.scanNumber }}</span>
            <span>评论：{{ item.commentNumber }}</span>
            <!-- {{ item.category.name }} -->
            <!-- <router-link v-if="item.category.id"
              :to="{
                name: 'CategoryBlog',
                params: {
                  categoryId: item.category.id
                },
              }"
              >{{ item.category.name }}</router-link> -->
          </div>
          <div class="desc">
            {{ item.description }}
          </div>
        </div>
      </li>
    </ul>

    <div class="btn">
      <p class="Up" @click="scrollTop">
        <Icon type="arrowUp" />
      </p>
      <p class="Down" @click="scrollBottom">
        <Icon type="arrowDown" />
      </p>
    </div>
    <!-- 分页 -->
    <Page
      @pagerChange="handleChange"
      :total="data.total"
      v-if="data.total"
      :current="routeInfo.page"
      :limit="routeInfo.limit"
      :visibleNumber="10"
    />
    
  </div>
</template>

<script>
import Empty from '@/components/Empty'
import Icon from "@/components/Icon";
import Page from "@/components/Pages";
import { getBlogs } from "@/api/blog.js"; // 引入blog mock模拟数据
import fetchData from "@/mixins/fatchData.js"; // 引入公共远程获取数据
import mainScroll from "@/mixins/mainScroll.js"; 
import { fromDate } from "@/utils"; // 引入时间戳转换日期格式事件
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  mixins: [fetchData({}),mainScroll("mainContainer")],
  computed: {
    // 获取路由信息
    routeInfo() {
      // + 转换为数字
      const categoryId = +this.$route.params.categoryId || -1;
      const page = +this.$route.query.page || 1;
      const limit = +this.$route.query.limit || 10;
      return {
        categoryId,
        page,
        limit,
      };
    },
  },
  methods: {
    fromDate,
    // 获取数据
    async fetchData() {
      return await getBlogs(
        this.routeInfo.categoryId,
        this.routeInfo.page,
        this.routeInfo.limit
      );
    },
    // 分页点击事件
    handleChange(newPage) {
      const query = {
        page: newPage,
        limit: this.routeInfo.limit,
      };
      // 跳转到 当前的分类id 当前的页容量 newpage的页码
      if (this.routeInfo.categoryId === -1) {
        // 表示当前没有分类
        this.$router.push({
          name: "Blog",
          query,
        });
      } else {
        this.$router.push({
          name: "CategoryBlog",
          query,
          params: {
            categoryId: this.routeInfo.categoryId,
          },
        });
      }
    },
    scrollTop() {
      this.$refs.mainContainer.scrollTop = 0;
    },
    scrollBottom() {
      this.$refs.mainContainer.scrollTop = this.$refs.mainContainer.scrollHeight;
    },
  },
  // 监听$route 改变data数据重新渲染 设置loding组件的启动
  watch: {
    async $route() {
      this.isLoading = true;
      this.data = await this.fetchData();
      // location.reload()
      this.isLoading = false;
    },
  },
  components: {
    Page,
    Icon,
    Empty
  },
};
</script>

<style lang="less" scoped>
@import "~@/style/var.less";
.blog-list-container {
  line-height: 1.7;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  overflow-y: scroll;
  height: 100%;
  scroll-behavior: smooth;
  
  li {
    list-style: none;
    display: flex;
    // padding: 15px 0;
    border-bottom: 1px solid @gray;
    .desc {
      margin: 30px 0;
      font-size: 14px;
    }
    .thumb {
      flex: 0 0 auto;
      margin-right: 15px;
      img {
        display: block;
        max-width: 200px;
        border-radius: 5px;
      }
    }
    .main {
      flex: 1 1 auto;
      h2 {
        margin: 0;
      }
    }
    .aside {
      font-size: 12px;
      width: 300px;
      height: 0;
      color: @gray;
      span {
        margin-right: 15px;
      }
    }
  }
}
.btn {
  position: fixed;
  top: 40%;
  right: 320px;
  border-radius: 50%;
  text-align: center;
}
.Up,
.Down {
  width: 50px;
  height: 50px;
  background: #eee;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  opacity: 0.5;
  cursor: pointer;
}
.Down {
  margin-top: 30px;
}
</style>